<script setup lang="ts">
import type Typings from "@/typings";
import service from "@/apis";
import { onMounted, ref } from "vue";
import MenuDialog from "./components/menuDialog.vue";
import ButtonDialog from "./components/buttonDialog.vue";
import { $confirm, $singleMsg } from "@/utils/element";

const loop = (list: Typings.Menu.props[]) => {
  return list.map((i) => {
    if (i.children?.length) {
      i.menuType = "node";
      loop(i.children as Typings.Menu.props[]);
    } else if (i.buttonList) {
      i.menuType = "menu";
      i.children = i.buttonList;
    }

    if (!i.parentKey) {
      i.menuType = "system";
    }

    return i;
  });
};

// 表格数据
const menuAllTree = ref<Typings.Menu.props[]>([]);
const loading = ref<boolean>(false);
const menuAllTreeApi = async () => {
  loading.value = true;
  try {
    const { data } = await service.menuAllTreeApi();
    menuAllTree.value = loop(data);

    console.log(menuAllTree.value);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  menuAllTreeApi();
});

// 弹窗 ref
const menuDialogRef = ref();
const buttonDialogRef = ref();
const controller = {
  // 添加 | 编辑 | 查看
  handleMenuDetail: async (
    row: Partial<Typings.Menu.props>,
    mode: Typings.Common.modeType = "view"
  ) => {
    if (mode === "delete") {
      await $confirm({ tip: "确定要删除该菜单吗" });
      await service.menuRemoveApi({ id: row.id });
      $singleMsg({ message: "删除成功" });
    } else if (mode === "add") {
      const data = {
        parentKey: row.key || "",
      };

      await menuDialogRef.value.open(data, mode);
    } else {
      await menuDialogRef.value.open(row, mode);
    }

    menuAllTreeApi();
  },

  // 新增 | 编辑按钮
  handleButtonDetail: async (
    row: Partial<Typings.Menu.props>,
    mode: Typings.Common.modeType = "view"
  ) => {
    // 删除按钮
    if (mode === "delete") {
      await $confirm({ tip: "确定要删除该按钮吗" });
      await service.buttonRemoveApi({ id: row.id });
      $singleMsg({ message: "删除成功" });
    } else if (mode === "add") {
      const data = {
        parentKey: row.key || "",
      };

      await buttonDialogRef.value.open(data, mode);
    } else {
      await buttonDialogRef.value.open(row, mode);
    }

    menuAllTreeApi();
  },
};
</script>

<template>
  <div class="menu-container w-full h-full overflow-hidden flex flex-col">
    <div class="btn-container text-right">
      <el-button
        type="success"
        class="mb-[10px]"
        @click="controller.handleMenuDetail({}, 'add')"
        >添加系统</el-button
      >
    </div>
    <div class="table-container flex-1 h-0">
      <el-table
        height="100%"
        :data="menuAllTree"
        row-key="id"
        border
        v-loading="loading"
      >
        <el-table-column
          prop="title"
          label="标题"
          align="center"
          min-width="180"
        >
          <template #default="{ row }">
            <xt-button
              type="text"
              @click="
                ['node', 'menu'].includes(row.menuType)
                  ? controller.handleMenuDetail(row, 'view')
                  : controller.handleButtonDetail(row, 'view')
              "
            >
              {{ row.title }}
            </xt-button>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" min-width="180">
          <template #default="{ row }">
            <el-tag v-if="['system'].includes(row.menuType)" type="danger"
              >系统</el-tag
            >
            <el-tag v-else-if="['node'].includes(row.menuType)" type="primary"
              >节点</el-tag
            >
            <el-tag v-else-if="['menu'].includes(row.menuType)" type="success"
              >菜单</el-tag
            >
            <el-tag type="info" v-else>按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="key"
          label="key值"
          align="center"
          min-width="180"
        />
        <!-- <el-table-column prop="path" label="路径" align="center" /> -->
        <el-table-column
          prop="createdTime"
          label="创建时间"
          align="center"
          min-width="180"
        >
          <template #default="{ row }">
            {{ row.createdTime?.toTime() }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <template v-if="['system', 'node', 'menu'].includes(row.menuType)">
              <!-- 菜单 | 节点所有的按钮 -->
              <xt-link
                class="mx-[4px]"
                v-if="
                  ['system', 'node', 'menu'].includes(row.menuType) &&
                  !row.buttonList?.length
                "
                type="primary"
                @click="controller.handleMenuDetail(row, 'add')"
              >
                添加菜单
              </xt-link>
              <xt-link
                class="mx-[4px]"
                v-if="['menu'].includes(row.menuType)"
                type="primary"
                @click="controller.handleButtonDetail(row, 'add')"
              >
                添加按钮
              </xt-link>
              <xt-link
                class="mx-[4px]"
                type="info"
                @click="controller.handleMenuDetail(row, 'update')"
                >编辑</xt-link
              >
              <xt-link
                class="mx-[4px]"
                type="danger"
                @click="controller.handleMenuDetail(row, 'delete')"
                >删除</xt-link
              >
            </template>
            <template v-else>
              <!-- 按钮所有的按钮 -->
              <xt-link
                class="mx-[4px]"
                type="primary"
                @click="controller.handleButtonDetail(row, 'update')"
              >
                编辑
              </xt-link>
              <xt-link
                class="mx-[4px]"
                type="danger"
                @click="controller.handleButtonDetail(row, 'delete')"
              >
                删除
              </xt-link>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <menu-dialog ref="menuDialogRef" />
    <button-dialog ref="buttonDialogRef" />
  </div>
</template>
